<template>
  <div class="wrapper">
    <a-tabs @change="onTabChange">
      <a-tab-pane key="wwj" tab="未完结" />
      <a-tab-pane key="ywj" tab="已完结" />
    </a-tabs>
    <div class="main">
      <ListContent
        v-show="activeTab === 'wwj'"
        :isFinish="false"
        :eventTypeLst="eventTypeLst"
        :dispatchLst="dispatchLst"
        :templateLst="templateLst"
        :companyLst="companyLst"
      />
      <ListContent
        v-show="activeTab === 'ywj'"
        :isFinish="true"
        :eventTypeLst="eventTypeLst"
        :dispatchLst="dispatchLst"
        :templateLst="templateLst"
        :companyLst="companyLst"
      />
    </div>
  </div>
</template>
<script>
import ListContent from "./listContent.vue";
import { loadEventTypeReq } from "./templates/api";
import { dispatchListReq, selectAllTemplateBySiteReq } from "./api";
import { mapState } from "vuex";
export default {
  name: "",
  components: { ListContent },
  mixins: [],
  props: {},
  data() {
    return {
      eventTypeLst: [],
      dispatchLst: [],
      templateLst: [],
      companyLst: [],
      activeTab: "wwj",
      tipped: false
    };
  },
  computed: {
    ...mapState(["hr"]),
    companyList() {
      return this.hr.companyList;
    }
  },
  watch: {
    companyList: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.loadDynamicData();
        } else {
          if (!this.tipped) {
            this.tipped = true;
            this.$message.warning("未查询到用工单位，请先创建用工单位");
          }
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    loadDynamicData() {
      loadEventTypeReq()
        .then((res) => {
          if (res && res.data && res.data.length >= 0) {
            this.eventTypeLst = res.data.map((item) => {
              return {
                label: item.dictItemValue,
                value: item.dictItemValue
              };
            });
          } else {
            this.eventTypeLst = [];
          }
        })
        .catch((err) => {
          console.log("loadEventType", err);
        });
      dispatchListReq()
        .then((res) => {
          if (res && res.data && res.data.length >= 0) {
            this.dispatchLst = res.data.map((item) => {
              return {
                label: item.name,
                value: item.id
              };
            });
          } else {
            this.dispatchLst = [];
          }
        })
        .catch((err) => {
          console.log("dispatchList", err);
        });
      selectAllTemplateBySiteReq()
        .then((res) => {
          if (res && res.data && res.data.length >= 0) {
            this.templateLst = res.data.map((item) => {
              return {
                label: item.templateName,
                value: item.id
              };
            });
          } else {
            this.templateLst = [];
          }
        })
        .catch((err) => {
          console.log("dispatchList", err);
        });
      this.companyLst = this.hr.companyList.map((item) => ({
        label: item.name,
        value: item.id
      }));
    },
    onTabChange(key) {
      if (this.activeTab !== key) {
        this.activeTab = key;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  background: #fff;
  border-radius: 4px;
  ::v-deep .ant-tabs-bar {
    margin: 0;
  }
  ::v-deep .ant-tabs-nav-container {
    line-height: 30px;
    padding: 0 24px;
  }
}
.main {
  padding: 24px;
}
</style>
